
<!DOCTYPE html>
<html>
<head>
  <title>帐号设置</title>
   <#include "../common/link.ftl">
    <style type="text/css">
        .avatar-img{
            border: none;
            width: 100px;
            height: 100px;
            margin: 2px 1px;
            border-radius: 60px;
        }
        .checked{border:5px solid red;}
    </style>
</head>
<body>

<#include "../common/header.ftl">

<div class="layui-container fly-marginTop fly-user-main">
  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
    <li class="layui-nav-item">
      <a href="${ctx.contextPath}/user/home">
        <i class="layui-icon">&#xe68e;</i>
        我的主页
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="${ctx.contextPath}/user/center">
        <i class="layui-icon">&#xe612;</i>
        用户中心
      </a>
    </li>
    <li class="layui-nav-item layui-this">
      <a href="#">
        <i class="layui-icon">&#xe620;</i>
        基本设置
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="${ctx.contextPath}/user/mypost">
        <i class="layui-icon layui-icon-form">&#xe63c;</i>
        我的帖子
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="${ctx.contextPath}/user/message">
        <i class="layui-icon">&#xe611;</i>
        我的消息
      </a>
    </li>
  </ul>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="pass">密码</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">

         <!--我的资料-->
         <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <#--<form method="post">-->
            <div class="layui-form-item">
              <label for="email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="email" name="email" required lay-verify="email" autocomplete="off" value="${user.email!''}" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需<a href="${ctx.contextPath}/user/activate" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div>
            </div>
            <div class="layui-form-item">
              <label for="username" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="username" name="username" required lay-verify="required" autocomplete="off" value="${user.username!''}" class="layui-input">
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <#if user.gender == "男">
                    <input type="radio" name="gender" value="男" checked title="男">
                    <input type="radio" name="gender" value="女" title="女">
                  <#else>
                    <input type="radio" name="gender" value="男" title="男">
                    <input type="radio" name="gender" value="女" checked title="女">
                  </#if>
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label for="city" class="layui-form-label">城市</label>
              <div class="layui-input-inline">
                <input type="text" id="city" name="city" autocomplete="off" value="${user.city!''}" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item layui-form-text">
              <label for="sign" class="layui-form-label">签名</label>
              <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="sign"  name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;">${user.sign!''}</textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" id="info_btn">确认修改</button>
            </div>
          </div>

          <!--头像-->
          <div class="layui-form layui-form-pane layui-tab-item">
              <div class="layui-form-item" id="avatar_id">
              <div>选择您喜欢的头像:</div>
              <#list 0..12 as number>
                <#if (user.avatar!'') == "/static/images/avatar/${number}.jpg" >
                    <img class="pointer avatar-img checked" src="${ctx.contextPath}/static/images/avatar/${number}.jpg">
                <#else >
                    <img class="pointer avatar-img" src="${ctx.contextPath}/static/images/avatar/${number}.jpg">
                </#if>
              </#list>
              </div>

              <div class="layui-form-item">
                  <button class="layui-btn" key="set-mine" lay-filter="*" id="avatar_btn">确认修改</button>
              </div>
          </div>

          <!--密码-->
          <div class="layui-form layui-form-pane layui-tab-item">
            <#--<form action="/user/repass" method="post">-->
              <div class="layui-form-item">
                <label for="nowpass" class="layui-form-label">当前密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="nowpass" name="nowpass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="pass" class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="newpass" name="newpass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label for="repass" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="repass" name="repass" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" id="pass_btn">确认修改</button>
              </div>
            <#--</form>-->
          </div>

      </div>
    </div>
  </div>
</div>

<#include "../common/footer.ftl">

<script>
layui.cache.page = 'user';
layui.cache.user = {
  username: '游客'
  ,uid: -1
  ,avatar: '${ctx.contextPath}/static/images/avatar/00.jpg'
  ,experience: 83
  ,sex: '男'
};
layui.config({
  version: "2.0.0"
  ,base: '${ctx.contextPath}/static/mods/'
}).extend({
  fly: 'index'
}).use('fly', function () {
    var $ = layui.$, layer = layui.layer;

    $("#info_btn").on("click", function () {
        var email_dom = $("#email"), username_dom = $("#username");
        if (!mq.verify_email(email_dom) || !mq.verify_val(username_dom)) {
            return false;
        }

        var id = "${user.id}";
        var email = email_dom.val();
        var username = username_dom.val();
        var gender = $("input[name='gender']:checked").val();
        var city = $("#city").val();
        var sign = $("#sign").val();

        var ctx = "${ctx.contextPath}";
        var data = {id:id, email:email, username:username, gender:gender, city:city, sign:sign};
        var index = layer.load();
        mq.async(ctx+"/user/updateInfo", data, ctx, index);
    });

    $("#pass_btn").on("click", function () {
        var nowpass_dom = $("#nowpass"), newpass_dom = $("#newpass"), repass_dom = $("#repass");

        if (!mq.verify_val(nowpass_dom) || !mq.verify_pass(newpass_dom)) {
            return false;
        }

        if (newpass_dom.val() != repass_dom.val()) {
            mq.danger_style(repass_dom);
            mq.error("两次输入密码不一致");
            return false;
        }
        var index = layer.load();
        $.ajax({
            url: "${ctx.contextPath}/user/updatePass",
            type: "post",
            data: {nowpass:nowpass_dom.val(), pass: repass_dom.val()},
            dataType: "json",
            success: function (result) {
                layer.close(index);
                if (result.status == 0) {
                    nowpass_dom.val("");
                    newpass_dom.val("");
                    repass_dom.val("");
                    mq.ok(result.msg);
                } else {
                    mq.error(result.msg);
                }
            }
        });
    });

    $("#avatar_btn").on("click", function () {
        var avatar_src = "";
        $("#avatar_id").find('img').each(function () {
            var class_value = $(this).attr("class");
            if(class_value.indexOf("checked") != -1) {
                avatar_src = $(this).attr("src").replace("${ctx.contextPath}", "");
                return false;//退出each循环
            }
        });

        if (!avatar_src) {
            return false;
        }
        var index = layer.load();
        $.ajax({
            url: "${ctx.contextPath}/user/updateAvatar",
            type: "post",
            data: {avatar: avatar_src},
            dataType: "json",
            success: function (result) {
                layer.close(index);
                if (result.status == 0) {
                    $("#header_avatar").attr("src", "${ctx.contextPath}" + avatar_src);
                    mq.ok(result.msg);
                } else {
                    mq.error(result.msg);
                }
            }
        });
    });

    (function() {
        var avatar_div = document.getElementById("avatar_id"),
                imgs = avatar_div.getElementsByTagName("img");
        for(var i = 0; i < imgs.length; i++){
            imgs[i].onclick = function() {
                for(var j = 0; j < imgs.length; j++){
                    if (imgs[j].className.indexOf("checked") !== -1 ) {
                        imgs[j].classList.remove("checked");
                    }
                }
                this.classList.add("checked");
            }
        }
    })();
});
</script>

</body>
</html>